<template>
  <el-form :model="searchFrom"
           ref="searchFrom"
           :inline="true"
           size="small"
           class="searchForm">
    <span v-for="item in searchFormList"
          :key="item.label"
          style="display:inline-box">
      <el-form-item v-if="item.inp_type == '_input'"
                    :label="item.label"
                    :prop="item.prop">
        <el-input v-model.trim="searchFrom[item.prop]"
                  :placeholder="`请输入${item.label}`"
                  clearable
                  @change="getTableData"></el-input>
      </el-form-item>
      <el-form-item v-if="item.inp_type == '_select'"
                    :label="item.label"
                    :prop="item.prop">
        <el-select v-model.trim="searchFrom[item.prop]"
                   :placeholder="`请选择${item.label}`"
                   clearable
                   @change="getTableData">
          <el-option v-for="temp in item.selectOption"
                     :key="temp.label"
                     :label="temp.label"
                     :value="temp.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="item.inp_type == '_date'"
                    :label="item.label"
                    :prop="item.prop">
        <el-date-picker v-model.trim="searchFrom[item.prop]"
                        type="datetimerange"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="setTime">
        </el-date-picker>
      </el-form-item>
    </span>
    <el-form-item style="margin-left:30px">
      <el-button class="el-btn-success">查询</el-button>
      <el-button plain
                 @click="resetForm('searchFrom')">重置</el-button>
    </el-form-item>
    <div>{{searchFrom}}</div>
  </el-form>
</template>

<script>
export default {
  name: 'SearchFrom',
  props: {
    /**
     * searchFormList数组中对象属性介绍：
     * 1、label 搜索框左边文字
     * 2、prop 里面的字段是用来生成v-model绑定对象的属性
     * 3、prop的value值作为Key值  用来给v-model绑定对象属性的初始值
     * 4、inp_type用来指定form表单生成的类型（_input，_select，_date）
     * 5、inp_type的value值为_date时，要加timeObj数组指定收集到开始时间、结束时间的字段
     */
    searchFormList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    searchFormList: {
      handler: async function (nval) {
        const formObj = await this.createFormObj(nval)
        this.searchFrom = { ...formObj }
        this.timeObj = formObj.initObj
      },
      immediate: true
    }
  },
  data () {
    return {
      searchFrom: {},
      timeObj: []
    }
  },
  methods: {
    //搜索栏时间设置
    setTime (date) {
      this.searchFrom[this.timeObj[0]] = date[0]
      this.searchFrom[this.timeObj[1]] = date[1]
      setTimeout(() => {
        this.getTableData()
      }, 50)
    },
    getTableData () {
      this.$parent.getTableData(this.searchFrom)
    },
    createFormObj (arr) {
      const formInline = {}
      arr.forEach(item => {
        formInline[item.prop] = item[item.prop]
        if (item.inp_type == '_date') {
          formInline[item.timeObj[0]] = ''
          formInline[item.timeObj[1]] = ''
          formInline.initObj = item.timeObj
        }
      })
      return new Promise((resolve, reject) => {
        resolve(formInline)
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
      if (this.searchFrom.time) {
        this.searchFrom[this.timeObj[0]] = ''
        this.searchFrom[this.timeObj[1]] = ''
      }
      this.getTableData()
    },
  }
}
</script>

<style scoped>
.searchForm {
  box-sizing: border-box;
  padding: 15px 20px;
}
</style>